<template>
  <section class="xm-content xm-role">
    <el-form
      ref="form"
      v-loading="box_loading"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="100px"
      inline-message
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" clearable placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="授权">
        <el-tree
          ref="mytree"
          :default-checked-keys="form.ids"
          :data="dataList"
          node-key="id"
          :props="{ label: 'name' }"
          default-expand-all
          show-checkbox
          :expand-on-click-node="false"
        >
        </el-tree>
      </el-form-item>
    </el-form>
    <div class="xm-footer">
      <el-button
        type="primary"
        size="mini"
        :loading="btn_loading"
        @click="saves('form')"
        >确 定</el-button
      >
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import { getHierarchyAll, addLine, editLine, getLine } from '@/api/line'
export default {
  props: {
    layerid: {
      default: 0,
    },
    row: {
      default: {},
    },
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      dataList: [],
      form: {
        // status: 'normal',
        name: '', //名称
        ids: [], //	授权菜单
      },
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
      },
      manchinesList: [],
      checkedDataArr: [],
    }
  },
  mounted() {
    // this.getMaschines();
    if (this.row.id) {
      this.form = JSON.parse(JSON.stringify(this.row))
      this.getLine(this.row.id)
    }
    this.getHierarchyAll()
  },
  methods: {
    async getLine(id) {
      const { data } = await getLine(id)
      let _this = this
      _this.$data.thisRefTree = setInterval(() => {
        data.list.forEach((item) => {
          console.warn(_this.$refs.mytree.getNode(item))

          let node = _this.$refs.mytree.getNode(item)
          if (node.isLeaf) {
            _this.$refs.mytree.setChecked(node, true)
          }
        })
        clearInterval(_this.$data.thisRefTree)
      }, 200)
      // this.form.ids = data.list;
    },
    // 获取用户
    async getHierarchyAll() {
      this.box_loading = true
      const { data } = await getHierarchyAll()
      this.dataList = data
      this.box_loading = false
    },
    /* 添加、编辑 */
    saves(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const obj = JSON.parse(JSON.stringify(this.form))
          let onCheck = this.$refs.mytree.getHalfCheckedKeys()
          let isCheck = this.$refs.mytree.getCheckedKeys()
          let result = []
          result = onCheck
          isCheck.forEach((item) => {
            result.push(item)
          })

          obj.ids = result

          this.btn_loading = true
          let res = ''
          if (obj.id) {
            res = await editLine(obj)
          } else {
            res = await addLine(obj)
          }
          this.btn_loading = false
          if (res.status && res.status != 200) {
            // this.$message({ message: res.data.message, type: 'error' })
            return false
          }
          Object.assign(this.$data, this.$options.data())
          this.$layer.close(this.layerid)
          this.$parent.getLines()
          this.$message({ message: '操作成功', type: 'success' })
          Object.assign(this.$data.form, this.$option.data().form)
        } else {
          this.$refs[formName].validate()
        }
      })
    },
    close() {
      this.$layer.close(this.layerid)
    },
  },
}
</script>
<style>
.el-upload-list__item {
  transition: none !important;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.el-dialog .el-dialog__footer {
  z-index: 100;
}
</style>
